<template>
  <div class="base-pagination clearfix">
    <slot></slot>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="newPage" :pageSize="size.pageSize" :page-sizes="size.pageSizes" background
                   layout="total,sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'pt-pagination',
    props: {
      total: {
        type: Number,
        default: 0
      },
      size:{
        type: Object,
        default:() => {
          return {
            pageSize: 10,
            pageSizes: [10, 20, 30, 40]
          }
        }
      }
    },
    data() {
      return {
        newPage: 1 //默认
      }
    },
    methods: {
      handleCurrentChange(page) { //切换分页
        this.$emit('listeningEvent', 'page', page)
      },
      handleSizeChange(size) { // 切换条数
        this.$emit('listeningEvent', 'size', size)
        this.size.pageSize = size
        this.newPage = 1
      }
    }
  }
</script>